<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script></script>
<style type="text/css">
body{
	padding: 10px
}
.res{
	display: inline-block;
	margin : 0px 5px;
	width: 60px;
	height: 20px;
	line-height:20px;
}
input {
	color:blue;
	text-align: center;
	font-size: 1.2em;
	font-weight : bold;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom : 1px solid #555;
	background: inherit;
	width:70%
}
.qlist dl{
	padding: 5px;
	border: 1px solid #ccc;
	background: #eee;
	border-radius: 5px;
}
.qlist dl:hover{
	border-color: blue;
}
.qlist{
	overflow: auto; 
}
</style>
</head>
<body>
	<div id="main">
		<fieldset class="alist">
			<legend>正则表达式练习题2 答题结果</legend>
			<span class="res" v-for="q,i in questions">
				题{{i+1}}: <b style="color: red">{{q.result?'对':''}}</b>
			</span>
		</fieldset>
		<fieldset>
			<legend>题目: 请按照要求再横线处填写代码, 浏览器控制台会打印每道题的返回结果</legend>
			<div class="qlist">
			<dl v-for="q,i in questions">
				<dt>第{{i+1}}题 <b style="color: red">{{q.result?'对':''}}</b></dt>
				<dd>
					<span v-html="prefix( q.content )"></span>
					<input @change="test( q, $event )">
					<span v-html="suffix( q.content )"></span>
					<span v-html="q.expect != undefined ? q.expect : ''" :style="showResult(q)"></span>
				</dd>
			</dl>
			</div>
		</fieldset>
	</div>
	<script type="text/javascript">
		function Q(content, expect, validate){
			this.content = content;
			this.validate = validate;
			if(expect != undefined) this.expect = expect;
			this.result = false;
		}
		new Vue({
			el : "#main",
			data : {
				questions : [
					new Q("var data = 'Bat bat BAT Cat cat CAT Fat fat FAT';<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['bat','cat','fat']),
					new Q("var data = 'Bat bat BAT Cat cat CAT Fat fat FAT';<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['Bat','bat','BAT']),
					new Q("var data = 'Bat bat BAT Cat cat CAT Fat fat FAT';<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['Bat','bat','BAT','Cat','cat','CAT']),
						
					new Q("var data = 'Bat bat BAT Cat cat CAT Fat fat FAT';<br>//参考 '负向类' (排除) 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['bat','cat','fat'],{expr:/\^/,msg:"参考 '负向类' (排除) 定义正则表达式"}),
					new Q("var data = 'Bat bat BAT Cat cat CAT Fat fat FAT';<br>//参考 '负向类' (排除) 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['Bat','bat','BAT'],{expr:/\^/,msg:"参考 '负向类' (排除) 定义正则表达式"}),
					new Q("var data = 'Bat bat BAT Cat cat CAT Fat fat FAT';<br>//参考 '负向类' (排除) 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['Bat','bat','BAT','Cat','cat','CAT'],{expr:/\^/,msg:"参考 '负向类' (排除) 定义正则表达式"}),

					new Q("var data = 'Bat bat BAT Cat cat CAT Fat fat FAT';<br>//参考 '范围类' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['bat','cat','fat'],{expr:/\-/,msg:"参考 '范围类' 定义正则表达式"}),
					new Q("var data = 'Bat bat BAT Cat cat CAT Fat fat FAT';<br>//参考 '范围类' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['Bat','bat','BAT','Cat','cat','CAT'],{expr:/\-/,msg:"参考 '范围类' 定义正则表达式"}),
					new Q("var data = 'Bat bat BAT Cat cat CAT Fat fat FAT';<br>//参考 '范围类' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['Cat','cat','CAT','Fat','fat','FAT'],{expr:/\-/,msg:"参考 '范围类' 定义正则表达式"}),
					new Q("var data = 'nm1,nm2,nm3,nm4,nm5,nm6';<br>//参考 '范围类' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['nm1','nm2','nm3'],{expr:/\-/,msg:"参考 '范围类' 定义正则表达式"}),
					new Q("var data = 'nm1,nm2,nm3,nm4,nm5,nm6';<br>//参考 '范围类' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['nm4','nm5'],{expr:/\-/,msg:"参考 '范围类' 定义正则表达式"}),
						
					new Q("var data = 'nm1,nm2,nm3,nm4,nm5,nm6,nmA,nmB,nmC,nmD';<br>//参考 '范围类'组合 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['nm1','nm2','nm3','nmA','nmB','nmC'],{expr:/\-/,msg:"参考 '范围类'组合 定义正则表达式"}),
					new Q("var data = 'nm1,nm2,nm3,nm4,nm5,nm6,nmA,nmB,nmC,nmD';<br>//参考 '范围类'组合 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['nm1','nm2','nm5','nm6','nmB','nmC'],{expr:/\-/,msg:"参考 '范围类'组合 定义正则表达式"}),

					new Q("var data = 'test:0,root:12,admin:345,yc:7890';<br>//参考 '预定义类,范围类,量词' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						[0,12,345,7890],{expr:/[\\-]/,msg:"参考 '预定义类,范围类,量词' 定义正则表达式"}),
					new Q("var data = 'test:0,root:12,admin:345,yc:7890';<br>//参考 '预定义类,范围类,量词' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						[345,789],{expr:/[\\-]/,msg:"参考 '预定义类,范围类,量词' 定义正则表达式"}),
					new Q("var data = 'test:0,root:12,admin:345,yc:7890';<br>//参考 '预定义类,范围类,量词' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['test','root','admin',345,7890],{expr:/[\\-]/,msg:"参考 '预定义类,范围类,量词' 定义正则表达式"}),
					new Q("var data = 'test:0,root:12,admin:345,yc:7890';<br>//参考 '预定义类,范围类,量词' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						[345,7890],{expr:/[\\-]/,msg:"参考 '预定义类,范围类,量词' 定义正则表达式"}),
					new Q("var data = 'test:0,root:12,admin:345,yc:7890';<br>//参考 '预定义类,范围类,量词' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['test','root','admin','7890'],{expr:/[\\-]/,msg:"参考 '预定义类,范围类,量词' 定义正则表达式"}),
					new Q("var data = 'test:0,root:12,admin:345,yc:7890';<br>//参考 '预定义类,范围类,量词' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						[':',',',':',',',':',',',':'],{expr:/[\\-]/,msg:"参考 '预定义类,范围类,量词' 定义正则表达式"}),
					new Q("var data = 'test:0,root:12,admin:345,yc:7890';<br>//参考 '预定义类,范围类,量词' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['test','root','admin','yc'],{expr:/[\\-]/,msg:"参考 '预定义类,范围类,量词' 定义正则表达式"}),
					new Q("var data = 'test:0,root:12,admin:345,yc:7890';<br>//参考 '预定义类,范围类,量词' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['0','12','345','7890'],{expr:/[\\-]/,msg:"参考 '预定义类,范围类,量词' 定义正则表达式"}),
					new Q("var data = 'test:0,root:12,admin:345,yc:7890';<br>//参考 '预定义类,范围类,量词' 定义正则表达式<br>var reg = 答题线; <br>data.match(reg).toString(); // 要求返回 ", 
						['test','root','admi'],{expr:/[\\-]/,msg:"参考 '预定义类,范围类,量词' 定义正则表达式"}),
					new Q("var data = '武松  李逵  阮小七  宋江 燕青  卢俊义';<br>//参考 '预定义类,范围类,量词' 使用 split 函数<br>var arr = 答题线; <br>arr.toString(); // 要求返回 ", 
						['武松','李逵','阮小七','宋江','燕青','卢俊义']),
					]
			},
			methods : {
				test(q,event){
					var value = event.srcElement.value;
					if(q.validate){
						if( ! q.validate.expr.test(value)) {
							alert(q.validate.msg);
							q.result = false;
							return;
						}
					}
					var script = q.content.replace(/<br>/gi,'\r\n');
					script = script.replace('答题线',value);
					try{
						console.info("====测试开始====");
						console.info(script);
						var ret = eval(script);
						console.info("====测试结果====");
						console.info(ret);
						console.info("====测试结束====");
						q.result = q.expect != undefined ? ret == q.expect : true;
					}catch(e){
						console.error(e);
						q.result = false;
					}
				},
				prefix(text){
					return text.substring(0, text.indexOf('答题线'));
				},
				suffix(text){
					return text.substring(text.indexOf('答题线') + 3);
				},
				showResult(q){
					return {color:q.result?'green':'inherit',
							fontWeight:q.result?'bold':'inherit'}
				}
			},
			
		});
	</script>
</body>
</html>